<template>
  <div class="debug-container">
    <h1>数据库调试页面</h1>

    <!-- 用户信息 -->
    <div class="section">
      <h2>当前用户</h2>
      <pre>{{ JSON.stringify(currentUser, null, 2) }}</pre>
    </div>

    <!-- 球场数据 -->
    <div class="section">
      <h2>球场数据</h2>
      <button @click="loadCourts" :disabled="loading">加载球场</button>
      <div v-if="courts.length">
        <h3>球场列表 ({{ courts.length }} 个)</h3>
        <div v-for="court in courts" :key="court.id" class="court-item">
          <h4>{{ court.name }}</h4>
          <p>类型: {{ court.type }}</p>
          <p>状态: {{ court.status }}</p>
          <p>描述: {{ court.description }}</p>
          <details>
            <summary>时间段 ({{ court.time_slots?.length || 0 }} 个)</summary>
            <ul v-if="court.time_slots">
              <li v-for="slot in court.time_slots" :key="slot.id">
                {{ slot.time_range }} - ¥{{ slot.price }}
              </li>
            </ul>
          </details>
        </div>
      </div>
    </div>

    <!-- 预约数据 -->
    <div class="section">
      <h2>预约数据</h2>
      <button @click="loadBookings" :disabled="loading">加载预约</button>
      <div v-if="bookings.length">
        <h3>预约列表 ({{ bookings.length }} 个)</h3>
        <div v-for="booking in bookings" :key="booking.id" class="booking-item">
          <h4>{{ booking.courts?.name }}</h4>
          <p>时间: {{ booking.time_slots?.time_range }}</p>
          <p>日期: {{ booking.booking_date }}</p>
          <p>状态: {{ booking.status }}</p>
          <p>价格: ¥{{ booking.time_slots?.price }}</p>
        </div>
      </div>
    </div>

    <!-- 用户预约 -->
    <div class="section">
      <h2>我的预约</h2>
      <button @click="loadUserBookings" :disabled="loading">加载我的预约</button>
      <div v-if="userBookings.length">
        <h3>我的预约 ({{ userBookings.length }} 个)</h3>
        <div v-for="booking in userBookings" :key="booking.id" class="booking-item">
          <h4>{{ booking.courts?.name }}</h4>
          <p>时间: {{ booking.time_slots?.time_range }}</p>
          <p>日期: {{ booking.booking_date }}</p>
          <p>状态: {{ booking.status }}</p>
          <p>价格: ¥{{ booking.time_slots?.price }}</p>
        </div>
      </div>
    </div>

    <!-- SQL 查询 -->
    <div class="section">
      <h2>SQL 查询</h2>
      <textarea
        v-model="sqlQuery"
        placeholder="输入 SQL 查询语句..."
        rows="4"
        style="width: 100%; margin-bottom: 10px"
      ></textarea>
      <button @click="executeQuery" :disabled="loading">执行查询</button>
      <div v-if="queryResult">
        <h3>查询结果</h3>
        <pre>{{ JSON.stringify(queryResult, null, 2) }}</pre>
      </div>
    </div>

    <!-- 加载状态 -->
    <div v-if="loading" class="loading">加载中...</div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { supabase, getCurrentUser } from '@/lib/supabase'
import { useCourtStore } from '@/stores/court'

const courtStore = useCourtStore()
const currentUser = ref(null)
const courts = ref([])
const bookings = ref([])
const userBookings = ref([])
const loading = ref(false)
const sqlQuery = ref('SELECT * FROM courts LIMIT 5;')
const queryResult = ref(null)

// 加载当前用户
const loadCurrentUser = async () => {
  currentUser.value = await getCurrentUser()
}

// 加载球场
const loadCourts = async () => {
  loading.value = true
  try {
    await courtStore.loadCourts()
    courts.value = courtStore.courts
  } finally {
    loading.value = false
  }
}

// 加载预约
const loadBookings = async () => {
  loading.value = true
  try {
    await courtStore.loadBookings()
    bookings.value = courtStore.bookings
  } finally {
    loading.value = false
  }
}

// 加载用户预约
const loadUserBookings = async () => {
  loading.value = true
  try {
    userBookings.value = await courtStore.getUserBookings()
  } finally {
    loading.value = false
  }
}

// 执行 SQL 查询
const executeQuery = async () => {
  if (!sqlQuery.value.trim()) return

  loading.value = true
  try {
    const { data, error } = await supabase.rpc('exec_sql', {
      query: sqlQuery.value,
    })

    if (error) {
      // 如果 RPC 不存在，尝试直接查询
      const { data: directData, error: directError } = await supabase
        .from('courts')
        .select('*')
        .limit(5)

      if (directError) {
        queryResult.value = { error: directError.message }
      } else {
        queryResult.value = directData
      }
    } else {
      queryResult.value = data
    }
  } catch (error) {
    queryResult.value = { error: error.message }
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  loadCurrentUser()
})
</script>

<style scoped>
.debug-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.section {
  margin-bottom: 30px;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
}

.section h2 {
  margin-top: 0;
  color: #333;
}

.court-item,
.booking-item {
  margin-bottom: 15px;
  padding: 15px;
  background-color: #f9f9f9;
  border-radius: 5px;
}

.court-item h4,
.booking-item h4 {
  margin-top: 0;
  color: #2c3e50;
}

pre {
  background-color: #f4f4f4;
  padding: 10px;
  border-radius: 5px;
  overflow-x: auto;
  font-size: 12px;
}

button {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  margin-right: 10px;
}

button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

button:hover:not(:disabled) {
  background-color: #0056b3;
}

.loading {
  text-align: center;
  padding: 20px;
  color: #666;
}

details {
  margin-top: 10px;
}

summary {
  cursor: pointer;
  font-weight: bold;
}

ul {
  margin: 10px 0;
  padding-left: 20px;
}

li {
  margin-bottom: 5px;
}
</style>
